import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import Menu, { MenuProps } from '.';
// import MenuItem from './MenuItem';
// import SubMenu from './SubMenu';

const MenuItem = Menu.MenuItem;
const SubMenu = Menu.SubMenu;

// 声明故事的所属模块和名称
export default {
  title: 'Components/Menu',
  component: Menu,
} as Meta;

// 使用的模板
const Template: Story<MenuProps> = (args) => {
  return (
    <div style={{ width: '400px', margin: '20px auto' }}>
      <h2>Menu</h2>
      <Menu defaultIndex={'0'} onSelect={(index) => alert(index)}>
        <MenuItem>链接1</MenuItem>
        <MenuItem>链接2</MenuItem>
        <MenuItem>链接3</MenuItem>
      </Menu>
      <div style={{ marginTop: '10px' }}>
        <Menu defaultIndex={'2'} mode="vertical" defaultOpenSubMenus={['0']}>
          <SubMenu title="链接1纵向">
            <MenuItem>链接1-1</MenuItem>
            <MenuItem>链接1-2</MenuItem>
            <MenuItem>链接1-3</MenuItem>
          </SubMenu>
          <SubMenu title="链接1纵向">
            <MenuItem>链接1-1</MenuItem>
            <MenuItem>链接1-2</MenuItem>
            <MenuItem>链接1-3</MenuItem>
          </SubMenu>
          <MenuItem>链接2</MenuItem>
          <MenuItem>链接3</MenuItem>
        </Menu>
      </div>
      <Menu
        defaultIndex={'0'}
        onSelect={(index) => alert(index)}
        mode="vertical"
      >
        <MenuItem>链接1</MenuItem>
        <MenuItem>链接2</MenuItem>
        <MenuItem>链接3</MenuItem>
      </Menu>
      <Menu defaultIndex={'0'}>
        <SubMenu title="链接1横向">
          <MenuItem>链接1-1</MenuItem>
          <MenuItem>链接1-2</MenuItem>
          <MenuItem>链接1-3</MenuItem>
        </SubMenu>
        <MenuItem>链接2</MenuItem>
        <MenuItem>链接3</MenuItem>
      </Menu>
    </div>
  );
};

// 分别定义不同得故事类型
export const Primary = Template.bind({});

Primary.storyName = '默认的 Menu';
